import React, { useState } from "react";
import styled, { keyframes } from "styled-components";
import { useNavigate } from "react-router-dom";
// 动画定义
const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
`;

const scaleUp = keyframes`
  from { transform: scale(1); }
  to { transform: scale(1.03); }
`;

// 卡片容器
const CardContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: white;
  cursor: pointer;

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    animation: ${scaleUp} 0.3s forwards;
  }
`;

// 图片容器
const ImageContainer = styled.div`
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
`;

// 图片
const CardImage = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;

  ${CardContainer}:hover & {
    transform: scale(1.1);
  }
`;

// 内容容器
const ContentContainer = styled.div`
  padding: 20px;
  position: relative;
`;

// 标签
const Tag = styled.span`
  display: inline-block;
  padding: 4px 8px;
  background-color: #f2f2f2;
  color: #666;
  font-size: 12px;
  border-radius: 4px;
  margin-bottom: 10px;
`;

// 标题
const Title = styled.h3`
  font-size: 18px;
  color: #333;
  margin: 0 0 10px 0;
  font-weight: 500;
  transition: color 0.3s ease;

  ${CardContainer}:hover & {
    color: #c7000b; /* 华为红 */
  }
`;

// 描述
const Description = styled.p`
  font-size: 14px;
  color: #666;
  margin: 0 0 15px 0;
  line-height: 1.5;
`;

// 底部链接
const Link = styled.a`
  display: inline-flex;
  align-items: center;
  color: #c7000b; /* 华为红 */
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;

  &::after {
    content: "→";
    margin-left: 5px;
    transition: transform 0.3s ease;
  }

  ${CardContainer}:hover & {
    &::after {
      transform: translateX(3px);
    }
  }
`;

interface RecommendationItem {
  id: number;
  tag?: string;
  title: string;
  description: string;
  imageUrl: string;
  linkUrl: string;
}

interface HuaweiRecommendCardProps {
  item: RecommendationItem;
}

// 华为推荐卡片组件
const HuaweiRecommendCard: React.FC<HuaweiRecommendCardProps> = ({ item }) => {
  const [isHovered, setIsHovered] = useState<boolean>(false);

  const navigate = useNavigate();
  return (
    <CardContainer
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={() => {
        navigate("/haha");
      }}
    >
      <ImageContainer>
        <CardImage src={item.imageUrl} alt={item.title} />
      </ImageContainer>

      <ContentContainer>
        {item.tag && <Tag>{item.tag}</Tag>}
        <Title>{item.title}</Title>
        <Description>{item.description}</Description>
        <Link href={item.linkUrl}>了解更多</Link>
      </ContentContainer>
    </CardContainer>
  );
};

// 使用示例
const HuaweiRecommendationSection: React.FC = () => {
  const recommendations: RecommendationItem[] = [
    {
      id: 1,
      tag: "新品",
      title: "华为Mate 60 Pro",
      description: "非凡大师，领航未来，搭载鸿蒙操作系统4.0",
      imageUrl:
        "https://www-file.huawei.com/-/media/corp2020/home/box/14/visions-s6-pro-pc.jpg",
      linkUrl: "#",
    },
    {
      id: 2,
      tag: "解决方案",
      title: "华为云解决方案",
      description: "安全可靠的云计算服务，助力企业数字化转型",
      imageUrl:
        "https://www-file.huawei.com/-/media/corp2020/home/box/14/freebuds-6-825.jpg",
      linkUrl: "#",
    },
    {
      id: 3,
      tag: "技术",
      title: "5G技术",
      description: "领先的5G技术，构建万物互联的智能世界",
      imageUrl:
        "https://www-file.huawei.com/-/media/corp2020/home/box/14/mediacenter-ai-calling.jpg",
      linkUrl: "#",
    },
  ];

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
        gap: "24px",
        padding: "40px 0",
        maxWidth: "1200px",
        margin: "0 auto",
      }}
    >
      {recommendations.map((item) => (
        <HuaweiRecommendCard key={item.id} item={item} />
      ))}
    </div>
  );
};

export default HuaweiRecommendationSection;
